<%--
  Created by IntelliJ IDEA.
  User: 韦树达
  Date: 2024/11/19
  Time: 21:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/admin_nav.css" />
    <link rel="stylesheet" href="../css/yishi_guanli.css">
</head>
<body>
<jsp:include page="admin.jsp" />
<div class="container">
    <jsp:include page="admin_nav.jsp" />
<div class="content-card">
    <form action="#" method="post">
    <div class="servlet_on">
        <input class="btn0" type="text" placeholder="请输入搜索内容" name="btn0"/>
        <input class="add" type="button" value="新增" name="add"/>
        <input class="delete" type="button" value="批量删除" name="delete" onclick="showPopup()"/>
    </div>

    <table>
        <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>序号</th>
            <th>姓名</th>
            <th>岗位</th>
            <th>简介</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            <td>张美丽</td>
            <td>美容师</td>
            <td>擅长美容...</td>
            <td>
                <a href="#" class="action-link">编辑</a>
                <a href="#" class="action-link">删除</a>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2</td>
            <td>刘丽丽</td>
            <td>美容师</td>
            <td>擅长脸部美容...</td>
            <td>
                <a href="#" class="action-link">编辑</a>
                <a href="#" class="action-link">删除</a>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3</td>
            <td>韩慧慧</td>
            <td>高级美容师</td>
            <td>擅长美容...</td>
            <td>
                <a href="#" class="action-link">编辑</a>
                <a href="#" class="action-link">删除</a>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>4</td>
            <td>刘文静</td>
            <td>高级美容师</td>
            <td>性格活泼，擅长脸部美容...</td>
            <td>
                <a href="#" class="action-link">编辑</a>
                <a href="#" class="action-link">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="pagination">
        <span>共4条数据</span>
        <div>
            <button class="page-btn">&lt;</button>
            <button class="page-btn active">1</button>
            <button class="page-btn">&gt;</button>
        </div>
    </div>
    </form>
</div>
</div>
<form action="#" method="post">
    <div class="edit_staff">
        <div class="modal-header">
            <h3 class="modal-title">编辑</h3>
            <button class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label required">姓名：</label>
                <input type="text" class="form-control" placeholder="张美丽">
            </div>

            <div class="form-group">
                <label class="form-label">头像：</label>
                <div class="upload-area">
              <img src="" alt="Picture" class="upload-preview">
                    <input type="image" id="avatar" accept="image/*" style="display: none;">
                    <div class="upload-text">请选择要上传的图片</div>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">岗位：</label>
                <input type="text" class="form-control" placeholder="美容师">
            </div>

            <div class="form-group">
                <label class="form-label">简介：</label>
                <textarea class="form-control">擅长美容</textarea>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default">取消</button>
            <button type="button" class="btn btn-primary">确认</button>
        </div>
    </div>
</form>

<div class="overlay"></div>
<script>
    var add = document.querySelector(".add");
    var change = document.querySelector('.edit_staff');
    var overlay = document.querySelector('.overlay');
    add.onclick = function(){
        change.style.display='inline-block';
        overlay.style.display='inline-block';
    }
    var cancel = document.querySelector('.cancel');
    cancel.onclick = function(){
        change.style.display='none';
        overlay.style.display='none';
    }
</script>

</body>
</html>
